<script setup>
import {reactive, ref,h,nextTick,computed} from "vue"
import { NButton, NTag } from 'naive-ui'

let statusOptions = reactive([
  {label: "正常", value: 1},
  {label: "禁用", value: 2}
])
let tableCols = reactive([
  {title: 'ID',key: 'id'},
  {title: "用户名",key: "username"},
  {title: '昵称',key: 'nickname'},
  {title: "所属角色", key: "belonging_role"},
  {title: "地区/IP", key: "ip"},
  {title: "设备信息", key: "device_information"},
  {title: "登录时间", key: "login_time"},
  {title: "操作", key: "operate",render(row){
    return [
      h(
        NButton,{strong: true, tertiary: true, type:'error',style: 'margin-left: 15px;', size: 'small', onClick: () => handleDisable(row)}, {default: () => '删除'},
      )
    ]
  }}
])
let tableData = reactive([
  { id: 1, username: 'Hello', nickname: ' 1', belonging_role: '', ip: '',device_information:"",login_time:""},
])
let formValue = ref({
  username: "",
  ip: "",
  range:""
})
let page = ref(1)
let pagination = computed(() => ({
  pageSize: 10,
  page: page.value
}))

let handlePageChange = (curPage) => {
  page.value = curPage
}

// 禁用
const handleDisable = (row) => {
  console.log(row)
}

let rowProps = (row) => {
  return {
    onContextmenu: (e) => {
      message.info(JSON.stringify(row, null, 2))
      e.preventDefault()
      showDropdown.value = false
      nextTick().then(() => {
        showDropdown.value = true
        dropdown.x.value = e.clientX
        dropdown.y.value = e.clientY
      })
    }
  }
}
</script>

<template>
    <n-space vertical size="large">
      <n-form ref="formRef" inline label-placement="left" label-width="auto" :model="formValue">
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi :span="4" label="用户">
            <n-input v-model:value="formValue.username" placeholder="用户名/ID" />
          </n-form-item-gi>
          <n-form-item-gi :span="4" label="IP">
            <n-input v-model:value="formValue.ip" placeholder="IP地址" />
          </n-form-item-gi>
          <n-form-item-gi :span="10" label="时间">
            <n-date-picker v-model:value="range" type="datetimerange" clearable />
          </n-form-item-gi>
          <n-form-item-gi :span="6">
            <n-button strong secondary type="tertiary">
              查询
            </n-button>
          </n-form-item-gi>
        </n-grid>
      </n-form>
      <n-data-table
        bordered
        :columns="tableCols"
        :data="tableData"
        :row-props="rowProps"
        :pagination="pagination"
        :on-update:page="handlePageChange"
      />
    </n-space>
</template>